<template>
  <div id="incident-analysis">
    <v-header ref="vHeader" title="事件分析" @on-save="saveComUse" :dataMsg="downloadData" :saveShow = "save" :showDownloadBtn="save" :isDisabled="isDisabled"></v-header>
    <div class="box" style="height: calc(100% - 56px); padding: 10px 0 10px 10px;">
      <div style="padding-right: 10px; height: 100%; overflow: auto;">
        <div v-show="toggleValue === 'index'" class="event-nalysis-main">
          <div class="retention-conditions bg-color-white">
            <div class="tags-conditions">
              <!--------------------------常用---------------------->
              <div class="tags">
                <v-pageHeader ref="commonUse" :InquireTransCode="InquireTransCode" :setTransCode="setTransCode" num="01"
                              :delTransCode="delTransCode" itemKey="anal_id"
                              itemValue="anal_name" @on-click="getCommonData"></v-pageHeader>
              </div>
              <!--------------查询时间---------------------->
              <div class="search-date">
                <span class="lf font12">查询日期</span>
                <range-date-picker class="date-time" :defaultDate="dateValue" ref="datePicker" @date-change="changeDate"></range-date-picker>
              </div>
              <!-----------------------用户分群---------------------->
              <div class="conditions">
                <span class="font12">用户分群</span>
                <el-select size="mini" class="width160" v-model="userGroup" placeholder="请选择">
                  <el-option label="请选择" value=""></el-option>
                  <el-option
                    v-for="item in groupList"
                    :key="item.group_id"
                    :label="item.group_name"
                    :value="item.group_id">
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- --------------------------事件查询-------------------------- -->
            <div class="time-screening">
              <div v-for="(item, index) in eventList" :key="item.key">
                <span class="lf">事件查询</span>
                <!-- --------------------------事件-------------------------- -->
                <el-select size="mini" class="width160 lf" v-model="item.event_meta_id" placeholder="请选择"
                           @change="getEventName(item)" filterable>
                  <el-option
                    v-for="item in data.B020002"
                    :key="item.meta_id"
                    :label="item.event_name"
                    :value="item.meta_id">
                  </el-option>
                </el-select>
                <span class="lf" style="display: inline-block; width: 60px; font-size: 12px;">的属性</span>
                <!-- ----------------------------属性--------------------------------- -->
                <el-select size="mini" class="width160 lf" v-model="item.meta_id" placeholder="请选择"
                           @change="getColumeChs(item)" filterable>
                  <el-option
                    v-for="obj in item.vs_eventAttrArr"
                    :key="obj.meta_id"
                    :label="obj.colume_chs"
                    :value="obj.meta_id">
                  </el-option>
                </el-select>
                <span class="lf font12">的指标</span>
                <!-- --------------------指标-------------------- -->
                <el-select size="mini" class="width160 lf" v-model="item.tgt_meta_id" placeholder="请选择" @change="getIndicator(item)" filterable>
                  <el-option
                    v-for="item in item.vs_indicatorsList"
                    :key="item.meta_id"
                    :label="item.tgt_name"
                    :value="item.meta_id">
                  </el-option>
                </el-select>
                <div class="lf">
                  <i class="iconfont icon-add" @click="add('event', index)"></i>
                  <i v-if="eventList.length > 1" class="iconfont icon-close" @click="remove('event', index)"></i>
                </div>
              </div>
              <!------------------------分组---------------------->
              <div v-for="(val, index) in groupVal" :key="val.key">
                <span class="lf">分组查询</span>
                <el-select size="mini" class="width160 lf" v-model="val.meta_id" placeholder="请选择"
                           @change="changeGroupVal(val)" filterable>
                  <el-option
                    v-for="item in data.META_COLUME"
                    :key="item.meta_id"
                    :label="item.colume_chs"
                    :value="item.meta_id">
                  </el-option>
                </el-select>
                <div class="lf">
                  <i class="iconfont icon-add" @click="add('group', index)"></i>
                  <i v-if="groupVal.length > 1" class="iconfont icon-close" @click="remove('group', index)"></i>
                </div>
              </div>
            </div>
            <!----------------------事件筛选-------------------------->
            <div class="filter-conditions  bg-color-white font12">
              <div class="conditions-list">
                <div v-if="this.conditionList.length >= 2" class="group-btn" @click="toggle">
                  <v-button :width="30" :btnText="groupBtnVal.code_value_nm_cns"></v-button>
                </div>
                <div class="condition-group-list" v-for="(group, index) in conditionList" :key="group.key">
                  <div class="group-head" v-if="index !== 0"></div>
                  <div class="condition-group" v-for="(item, ind) in group.cond_groups" :key="item.key">
                    <div class="item-btn" v-if="ind !== 0">
                      <v-button :width="30" @on-click="toggleRelationship(item)"
                                :btnText="item.vs_bool_code_value === 'and' ? '且' : '或'"></v-button>
                    </div>
                    <div class="condition-group-item">
                      <el-select size="mini" v-model="item.meta_id" filterable class="width160 lf" placeholder="请选择" @change="changeEvent(item)">
                        <el-option
                          v-for="val in cond_arr1"
                          :key="val.key"
                          :label="val.colume_chs"
                          :value="val.meta_id">
                        </el-option>
                      </el-select>
                      <el-select size="mini" v-model="item.vs_code_value" class="width100 lf" placeholder="请选择"
                                 @change="changeAttr(item)">
                        <el-option
                          v-for="val in cond_arr2"
                          :key="val.key"
                          :label="val.code_value_nm_cns"
                          :value="val.code_value">
                        </el-option>
                      </el-select>
                      <el-input size="mini" v-if="getBool_1(item)" class="lf" v-model="item.cond_value[0]"></el-input>
                      <div class="date-time lf" v-if="getBool_2(item)">
                        <span>在</span>
                        <el-date-picker
                          class="width270"
                          v-model="item.vs_date_value"
                          type="daterange"
                          align="right"
                          size="mini"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          @change="change(item)">
                        </el-date-picker>
                        <span>之间</span>
                      </div>
                      <div class="amount-range lf" v-if="getBool_3(item)">
                        <span>在</span>
                        <el-input size="mini" class="width160" v-model="item.cond_value[0]" placeholder="输入内容"></el-input>
                        <span>和</span>
                        <el-input size="mini" class="width160" v-model="item.cond_value[1]" placeholder="输入内容"></el-input>
                        <span>之间</span>
                      </div>
                      <v-selectCheckbox v-if="getBool_4(item)" class="address-list lf" :options="countryList"
                                        :closable="true"></v-selectCheckbox>
                      <div class="icons-list lf">
                        <i class="iconfont icon-close" @click="remove_cond(index, ind)"></i>
                        <i class="iconfont icon-add" @click="addRow(group, ind)"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="add-condition">
                <el-button type="primary" plain icon="el-icon-plus" @click="addCondition"></el-button>
                <span>筛选条件</span>
              </div>
              <div class="examine">
                <div class="btns rf">
                  <el-button type="primary" size="mini" @click="search">查看</el-button>
                  <el-button size="mini" @click="reset">重置</el-button>
                </div>
              </div>
            </div>
          </div>
          <!-- -----------------------------ECharts图表------------------------- -->
          <div class="all-users bg-color-white">
            <cs-echarts ref="chart"></cs-echarts>
          </div>
          <!-- ----------------------- 表格 --------------------------- -->
          <div class="statistics bg-color-white">
            <cs-incident-table ref="csIncidentTable" @on-goUserList="goUserList"></cs-incident-table>
          </div>
        </div>
        <!-- ------------------------ 用户列表 ------------------------------- -->
        <div v-show="toggleValue === 'userList'" class="userList">
          <user-list ref="userList" @goBack="Back" :selectStranCode="selectStranCode" pageName="userDetail"></user-list>
        </div>
        <!-- ----------------- 用户详情 ---------------------- -->
        <div v-if="toggleValue === 'userDetail'" class="userDetail">
          <user-detail pageName="userList"></user-detail>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {
    VInput,
    VButton,
    VHeader,
    VSelectCheckbox,
    VPageHeader,
    VDropdown,
    VToolBar,
    RangeDatePicker
  } from './../../../../components'
  import csEcharts from './comm/csEcharts'
  import csIncidentTable from './comm/csIncidentTable'
  import {getDateTime1, getDateTime, dateFormat} from '../../../../assets/js/index'
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  import userList from '../../../../view/comm/userList.vue'
  import userDetail from '../../../../view/comm/userDetail'
  import store from '@/store'
  import Msg from '../../../../assets/js/msg'
  import dictData from './dict'

  export default {
    components: {
      VInput,
      VButton,
      VSelectCheckbox,
      VPageHeader,
      csEcharts,
      VHeader,
      csIncidentTable,
      VDropdown,
      VToolBar,
      userList,
      userDetail,
      RangeDatePicker
    },
    data () {
      return {
        save: true,
        InquireTransCode: api.SELECTBAARCHANALLIST, // 查询
        setTransCode: api.SETTINGBAARCHANALFORTOP, // 设置 / 取消置顶
        delTransCode: api.DELETEBAARCHANAL, // 删除常用
        dateValue: [], // 时间数组
        from_date: '', // 开始时间
        to_date: '', // 结束时间
        data: null, // 从本地缓存那会的常量数据
        groupBtnVal: null, // 条件筛选，第三方变量，最外层 且 / 或 的值
        cond_arr1: null, // 条件筛选的第一框
        cond_arr2: null, // 条件筛选的第二框
        conditionList: [], // 筛选条件返回的list
        eventList: [ // 进行操作后的事件列表， 作为参数传到后台
          {
            event_meta_id: '', // 事件
            meta_id: '', // 属性
            tgt_meta_id: '', // 指标
            vs_indicatorsList: [], // 指标列表
            vs_eventAttrArr: [] // 事件属性列表
          }
        ],
        countryList: [''], // 条件筛选中，国家的多选列表
        groupVal: [ // 分组返回的列表，作为参数传到后台
          {
            meta_id: ''
          }
        ],
        groupList: [], // 用户分群列表
        userGroup: '', // 用户分群的值
        userList: null,
        selectStranCode: api.SELECTANALYSEEVENTLIST, // 用户时间列表查询
        chartList: [],
        downloadData: [], // 下载的数据
        isDisabled: false
      }
    },
    computed: {
      // 'index' 显示主页，'userList' 显示用户列表，'userDetail' 显示用户详情
      toggleValue: () => {
        return store.state.toggleValue
      }
    },
    methods: {
      Back () {
        store.commit('updateToggleValue', 'index')
        this.save = true
      },
      // 保存常用
      saveComUse (item) {
        // 声明变量flag1和flag2
        let flag1 = false
        let flag2 = false
        // 验证事件查询是否为空
        for (let i = 0; i < this.eventList.length; i++) {
          if (this.eventList[i].meta_id !== '' && this.eventList[i].tgt_meta_id !== '' && this.eventList[i].event_meta_id !== '') {
            flag1 = true
            break
          }
        }
        // 验证分组查询是否为空
        for (let i = 0; i < this.groupVal.length; i++) {
          if (this.groupVal[i].meta_id !== '') {
            flag2 = true
            break
          }
        }
        // 当事件查询为空提示用户
        if (!flag1) {
          Msg.alert('请选择事件及事件属性！')
          return
        }
        // 当分组查询为空提示用户
        if (!flag2) {
          Msg.alert('请选择分组！')
          return
        }
        // 验证查询日期不能为空
        if (this.from_date === '' && this.to_date === '') {
          Msg.alert('开始日期和结束日期不能为空！')
          return
        }
        // 禁止重复提交
        this.isDisabled = true
        // 删除事件列表中的属性列表
        this.eventList.forEach(item => {
          delete item.vs_eventAttrArr
        })
        // 保存的数据
        const paramsData = {
          anal_name: item.pageHeaderName,
          is_top: item.isTop,
          anal_type: '01',
          message_content: JSON.stringify({
            analyse_type: '01',
            user_group: this.userGroup,
            from_date: this.from_date,
            to_date: this.to_date,
            w_list: this.conditionList,
            e_list: this.eventList,
            g_list: this.groupVal
          })
        }
        // 保存数据
        ajax.post(api.SAVEASCOMMON, paramsData).then(res => {
          // 清楚禁止重复提交
          this.isDisabled = false
          Msg.alert('保存成功')
          // 更新常用列表
          ajax.post(api.SELECTBAARCHANALLIST, { anal_type: '01' }).then(res => {
            // 常用数据传入子组件
            this.$refs.commonUse.getList(res.data)
          })
        }).catch(req => {
          // 清楚禁止重复提交
          this.isDisabled = false
        })
      },
      // 查询常用
      getCommonData (obj) {
        // 查询保存到常用的查询条件
        ajax.post(api.SELECTBAARCHANAL, { anal_id: obj.anal_id }).then(res => {
          // 获取条件字符串转为条件对象
          let data = JSON.parse(res.data.message_content)
          // 获取用户分群查询
          this.userGroup = data.user_group
          data.e_list.forEach(item => {
            this.$set(item, 'vs_eventAttrArr', [])
            ajax.post(api.LISTATTR, { meta_id: item.event_meta_id }).then(res => {
              res.data.forEach(obj => {
                item.vs_eventAttrArr.push(obj)
              })
            })
          })
          // 获取事件查询列表
          this.eventList = data.e_list
          // 获取分组查询列表
          this.groupVal = data.g_list
          // 获取条件筛选列表
          this.conditionList = data.w_list
          // 获取开始时间
          this.from_date = data.from_date
          // 获取结束时间
          this.to_date = data.to_date
          // 时间反显
          this.dateValue = [dateFormat(this.from_date), dateFormat(this.to_date)]
        })
      },
      // 时间改变事件
      changeDate (list) {
        if (list.length > 0) {
          // 获取开始时间
          this.from_date = getDateTime1(list[0])
          // 获取结束时间
          this.to_date = getDateTime1(list[1])
        } else {
          // 获取开始时间
          this.from_date = ''
          // 获取结束时间
          this.to_date = ''
        }
      },
      // 分组事件改变
      changeGroupVal (val) {},
      // 新增事件查询和分组查询
      add (str, index) {
        // 新增事件查询
        if (str === 'event') {
          // 如果事件查询少于三项，可继续新增
          if (this.eventList.length < 3) {
            const itemParams = {
              event_meta_id: '', // 事件
              meta_id: '', // 属性
              tgt_meta_id: '', // 指标
              vs_indicatorsList: [], // 指标列表
              vs_eventAttrArr: [] // 事件属性列表
            }
            this.eventList.splice(index + 1, 0, itemParams)
            // 否则事件查询超过三项，禁止新增
          } else {
            Msg.alert('最多只能添加三行！')
          }
          // 新增分组查询
        } else if (str === 'group') {
          // 如果分组查询少于三项，可继续新增
          if (this.groupVal.length < 3) {
            const itemParams = {
              meta_id: ''
            }
            this.groupVal.splice(index + 1, 0, itemParams)
            // 否则查询超过三项，禁止新增
          } else {
            Msg.alert('最多只能添加三行！')
          }
        }
      },
      // 选择事件
      getEventName (item) {
        // 像后台发起请求，请求事件属性列表
        ajax.post(api.LISTATTR, { meta_id: item.event_meta_id }).then(res => {
          if (res.data.length > 0) {
            item.vs_eventAttrArr.splice(0, item.vs_eventAttrArr.length)
            item.vs_eventAttrArr = res.data
            item.meta_id = ''
            item.tgt_meta_id = ''
            item.vs_indicatorsList = []
          } else {
            item.meta_id = ''
            item.tgt_meta_id = ''
            item.vs_indicatorsList = []
            item.vs_eventAttrArr = []
            Msg.alert('查询数据为空')
          }
        })
      },
      // 选择事件属性
      getColumeChs (item) {
        let dataType = ''
        // 遍历item中的vs_eventAttrArr列表
        for (let i = 0; i < item.vs_eventAttrArr.length; i++) {
          // 判断当前选中的meta_id的值是否与vs_eventAttrArr中某一项的meta_id的值相等
          // 如果相等，获取指标的类型
          if (item.vs_eventAttrArr[i].meta_id === item.meta_id) {
            // 如果指标的类型相等，就直接退出
            if (dataType === item.vs_eventAttrArr[i].data_type) {
              break
            } else {
              // 如果指标的类型不相等，就获取指标的值
              dataType = item.vs_eventAttrArr[i].data_type
              break
            }
          }
        }
        item.vs_indicatorsList.splice(0, item.vs_indicatorsList.length)
        const _getList = (obj, arr) => {
          arr.forEach(item => {
            obj.vs_indicatorsList.push(item)
          })
        }
        // 如果指标的类型值为text，获取指标列表
        if (dataType === 'text') {
          _getList(item, dictData.textList)
          // 如果指标的类型值为number，获取指标列表
        } else if (dataType === 'number') {
          _getList(item, dictData.numList)
        } else {
          // 否则，再次获取指标列表
          _getList(item, dictData.otherList)
        }
      },
      // 选择属性指标
      getIndicator () {},
      // 删除事件查询和分组查询
      remove (str, index) {
        if (str === 'event') {
          this.eventList.splice(index, 1)
        } else if (str === 'group') {
          this.groupVal.splice(index, 1)
        }
      },
      // 筛选条件区间日期改变事件
      change (item) {
        if (item.vs_date_value) {
          item.vs_date_value.forEach((val, key) => {
            item.cond_value[key] = getDateTime(val, 's')
          })
        }
      },
      // 筛选条件添加筛选条件
      addCondition () {
        if (this.conditionList.length < 3) {
          let itemData = {
            vs_data_type: '',
            vs_code: '',
            vs_code_value: '',
            vs_bool_code: '',
            vs_bool_code_value: '',
            meta_id: null,
            disp_serial: null,
            cond_link: '',
            cond_fmt: '',
            cond_value: []
          }
          let groupData = {
            vs_bool_code: 'B010006',
            disp_serial: null,
            cond_link: null,
            elem_type: 'W',
            cond_groups: []
          }
          let count = this.conditionList.length
          if (count === 0) {
            this.cond_arr1 = this.data.META_COLUME
            this.conditionList.splice(this.conditionList.length, 0, groupData)
            this.conditionList[count].cond_groups.splice(0, 0, itemData)
            this.conditionList[count].disp_serial = count
            this.conditionList[count].cond_groups[0].disp_serial = this.conditionList[count].cond_groups.length - 1
          } else {
            this.conditionList.splice(this.conditionList.length, 0, groupData)
            this.conditionList[count].cond_groups.splice(0, 0, itemData)
            this.conditionList[count].disp_serial = count
            this.conditionList[count].cond_groups[0].disp_serial = this.conditionList[count].cond_groups.length - 1
          }
          count++
        } else {
          Msg.alert('最多只能添加三行！')
        }
      },
      // 筛选条件切换外层的且 / 或
      toggle () {
        if (this.groupBtnVal.code_value === this.data.B010006[0].code_value) {
          this.groupBtnVal = this.data.B010006[1]
        } else {
          this.groupBtnVal = this.data.B010006[0]
        }
      },
      // 筛选条件事件选择
      changeEvent (obj) {
        this.cond_arr1.forEach(item => {
          if (item.meta_id === obj.meta_id) {
            if (item.data_type === 'text') {
              this.cond_arr2 = this.data.B010003
              obj.vs_data_type = 'text'
              obj.vs_code = 'B010003'
            } else if (item.data_type === 'number') {
              this.cond_arr2 = this.data.B010004
              obj.vs_data_type = 'number'
              obj.vs_code = 'B010004'
            } else if (item.data_type === 'date') {
              this.cond_arr2 = this.data.B010005
              obj.vs_data_type = 'date'
              obj.vs_code = 'B010005'
            }
          }
        })
      },
      // 筛选条件属性选择
      changeAttr (obj) {
        obj.cond_fmt = `${obj.vs_code}#${obj.vs_code_value}`
      },
      // 筛选条件删除一行
      remove_cond (index, ind) {
        if (this.conditionList.length === 1) {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        } else {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        }
      },
      // 筛选条件添加一行
      addRow (group, ind) {
        if (group.cond_groups.length < 3) {
          let itemData = {
            vs_data_type: '',
            vs_code: '',
            vs_code_value: '',
            vs_bool_code: 'B010006',
            vs_bool_code_value: this.data.B010006[0].code_value,
            meta_id: null,
            disp_serial: ind + 1,
            cond_link: '',
            cond_fmt: '',
            cond_value: []
          }
          itemData.cond_link = `${itemData.vs_bool_code}#${itemData.vs_bool_code_value}`
          group.cond_groups.splice(ind + 1, 0, itemData)
        } else {
          Msg.alert('最多只能添加三行！')
        }
      },
      // 筛选条件切换行与行之间的 且 / 或
      toggleRelationship (item) {
        if (item.vs_bool_code_value === 'and') {
          item.vs_bool_code_value = 'or'
        } else {
          item.vs_bool_code_value = 'and'
        }
        item.cond_link = `${item.vs_bool_code}#${item.vs_bool_code_value}`
      },
      // 查看结果
      search () {
        // 声明变量flag1和flag2
        let flag1 = false
        let flag2 = false
        // 验证事件查询是否为空
        for (let i = 0; i < this.eventList.length; i++) {
          if (this.eventList[i].tgt_meta_id !== '' && this.eventList[i].meta_id !== '' && this.eventList[i].event_meta_id !== '') {
            flag1 = true
            break
          }
        }
        // 验证分组查询是否为空
        for (let i = 0; i < this.groupVal.length; i++) {
          if (this.groupVal[i].meta_id !== '') {
            flag2 = true
            break
          }
        }
        // 当事件查询为空提示用户
        if (!flag1) {
          Msg.alert('请选择事件及事件属性！')
          return
        }
        // 当分组查询为空提示用户
        if (!flag2) {
          Msg.alert('请选择分组！')
          return
        }
        // 验证查询时间是否为空
        if (this.from_date === '' && this.to_date === '') {
          Msg.alert('开始日期和结束日期不能为空！')
          return
        }
        // 拼接筛选条件的关系的cond_link的值
        this.conditionList.forEach(item => {
          item.cond_link = `${item.vs_bool_code}#${this.groupBtnVal.code_value}`
        })
        // 请求参数
        let message = {
          analyse_type: '01',
          user_group: this.userGroup,
          from_date: this.from_date,
          to_date: this.to_date,
          w_list: this.conditionList,
          e_list: this.eventList,
          g_list: this.groupVal
        }
        // 数据请求
        ajax.post(api.ANALYSESEARCHOBJECT, message).then(res => {
          window.sessionStorage.setItem('from_date', this.from_date)
          window.sessionStorage.setItem('to_date', this.to_date)
          if (res.data.data_list.length > 0) {
            // 将数据传入echarts组件
            this.$refs.chart.getEchartsData(res.data.charts)
            // 获取下载数据
            this.downloadData = res.data.data_liat
            // 将数据传入table组件
            this.$refs.csIncidentTable.getTableData(res.data.data_list)
          } else {
            Msg.alert('查无数据')
          }
        })
      },
      // 重置
      reset () {
        this.chartList = []
        this.userGroup = ''
        this.conditionList = []
        this.dateValue = [new Date(), new Date()]
        this.eventList = [
          {
            event_meta_id: '', // 事件
            meta_id: '', // 属性
            tgt_meta_id: '', // 指标
            vs_indicatorsList: [] // 指标列表
          }
        ]
        this.groupVal = [
          {
            meta_id: ''
          }
        ]
        this.$refs.chart.getEchartsData({

        })
        this.$refs.csIncidentTable.getTableData([])
      },
      // 查看用户列表
      goUserList (obj) {
        const paramsData = {
          message: {
            analyse_type: '01',
            user_group: this.userGroup,
            from_date: this.from_date,
            to_date: this.to_date,
            w_list: this.conditionList,
            e_list: this.eventList,
            g_list: this.groupVal
          },
          reqjson: obj,
          page: {
            pageNo: 1,
            pageSize: 10
          }
        }
        store.commit('pb_updateCurrentPageData', paramsData)
        sessionStorage.setItem('paramsData', JSON.stringify(paramsData))
        ajax.post(api.SELECT_ANALYSE_USER_OBJECT_LIST, paramsData).then(res => {
          store.commit('updateToggleValue', 'userList')
          this.save = false
          this.userList = res.data
          this.$refs.userList.getUserList(this.userList)
        })
      },
      // 筛选条件判断条件
      getBool_1 (item) {
        if (item.vs_data_type === 'number' && (item.vs_code_value === '01' || item.vs_code_value === '02' || item.vs_code_value === '03' || item.vs_code_value === '04' || item.vs_code_value === '05' || item.vs_code_value === '06' || item.vs_code_value === '07' || item.vs_code_value === '08')) {
          return true
        } else if (item.vs_data_type === 'text' && (item.vs_code_value === '01' || item.vs_code_value === '02' || item.vs_code_value === '03' || item.vs_code_value === '04' || item.vs_code_value === '05' || item.vs_code_value === '06' || item.vs_code_value === '07' || item.vs_code_value === '08' || item.vs_code_value === '09' || item.vs_code_value === '10')) {
          return true
        } else if (item.vs_data_type === 'date' && (item.vs_code_value === '01' || item.vs_code_value === '02' || item.vs_code_value === '03' || item.vs_code_value === '04' || item.vs_code_value === '05' || item.vs_code_value === '06' || item.vs_code_value === '07' || item.vs_code_value === '08' || item.vs_code_value === '09' || item.vs_code_value === '10')) {
          return true
        } else {
          return false
        }
      },
      getBool_2 (item) {
        if (item.vs_data_type === 'date' && item.vs_code_value === '15') {
          return true
        } else {
          return false
        }
      },
      getBool_3 (item) {
        if (item.vs_data_type === 'number' && item.vs_code_value === '11') {
          return true
        } else {
          return false
        }
      },
      getBool_4 (item) {
        return false
      }
    },
    created () {
      ajax.post(api.SELECTUSERGROUPLIST).then(res => {
        this.groupList = res.data
      })
      this.dateValue = [new Date(), new Date()]
      this.from_date = getDateTime1(new Date())
      this.to_date = getDateTime1(new Date())
      this.data = JSON.parse(sessionStorage.getItem('commonData'))
      this.radio_list = this.data.B020004
      this.groupBtnVal = this.data.B010006[0]
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #incident-analysis
    height 100%
    .event-nalysis-main
      .retention-conditions
        .tags-conditions
          & > div
            height 50px
            line-height 50px
            padding 0 20px
            & > span.font12
              display inline-block
              width 80px
              margin-right 5px
          .tags
            height 51px
            border-bottom 1px solid #D8DCE5
          .conditions
            font-size 0
        .time-screening
          border-bottom 1px solid #D8DCE5
          .title:after
            content ''
            display inline-block
            width calc(100% - 110px)
            height 2px
            background #8BC4FF
            position absolute
            top 14px
            left 90px
          & > div
            overflow hidden
            height 50px
            line-height 50px
            padding 0 20px
            font-size 0
            color #5A5E66
            & > span
              display inline-block
              width 80px
              height 30px
              margin-right 5px
              font-size 12px
            i.iconfont
              line-height 50px
              font-size 14px
              margin-right 10px
              color #D8DCE5
            i.iconfont:hover
              color #016DFB
        .filter-conditions
          padding 30px 20px 20px 30px
          .conditions-list:before
            content ''
            width 0
            height calc(100% - 20px)
            border-left 1px solid #D8DCE5
            position absolute
            left 15px
            top 10px
          .conditions-list
            padding-left 40px
            position relative
            .el-input__inner
              font-size 12px
            .group-btn
              position absolute
              left 0
              top 50%
              margin-top -15px
            .condition-group-list
              .group-head
                height 50px
              .condition-group
                & > div
                  height 50px
                  line-height 50px
                  padding-left 10px
                .item-btn
                  position relative
                  .v-button
                    position absolute
                .condition-group-item
                  overflow hidden
                  & > .el-input
                    width 120px
                  .date-time
                    padding-left 10px
                    .el-date-editor
                      position relative
                      margin 0 10px
                      padding-top 0px
                      .el-range__icon
                        line-height 25px
                      .el-range-input, .el-range-separator
                        position relative
                      .el-range-separator
                        padding 0
                        font-size 12px
                  .amount-range
                    padding-left 10px
                    .el-input
                      margin 0 8px
                  .v-select-checkbox
                    margin-left 10px
                  .icons-list
                    margin-left 15px
                    i.iconfont
                      font-size 14px
                      margin-right 10px
                      color #D8DCE5
                    i.iconfont:hover
                      color #016DFB
          .add-condition
            width 150px
            height 50px
            line-height 50px
            cursor pointer
            .el-button
              width 30px
              height 30px
              display inline-block
              padding 0
              .el-icon-plus
                font-size 16px
                font-weight bold
            span
              font-size 12px
              color #016DFB
              margin-left 10px
          .examine
            height 30px
            line-height 30px
            padding 0 20px
            margin-top 30px
            .btns
              width 150px
              .el-button
                display inline-block
                width 65px
                height 30px
      .all-users
        margin-top 10px
        padding 10px 0
      .statistics
        margin-top 10px
    .userDetail, .userList
      height 100%
</style>
